<template>
    <Form ref="form" :model="form" label-position="left" :label-width="80" class="duty-searchcriteria">

        <FormItem label="学年">
            <RadioGroup v-model="form.schoolyear_id" @on-change="semesterData">
                <Radio v-for="(item,index) in yearList" :key="index" :label="item.schoolyear_id">{{ item.schoolyear_name.zh?item.schoolyear_name.zh:item.schoolyear_name.mn }}</Radio>
            </RadioGroup>
        </FormItem>
        
        <FormItem label="学期">
            <RadioGroup v-if="semesterList.length != 0" v-model="form.semester_id">
                <Radio v-for="(item,index) in semesterList" :key="index" :label="item.semester_id">{{ item.semester_name.zh? item.semester_name.zh: item.semester_name.mn }}</Radio>
            </RadioGroup>
            <Radio v-if="semesterList.length == 0" disabled>暂无数据（请选择学年）</Radio>
        </FormItem>

        <FormItem label="年级">
            <RadioGroup v-model="form.grade_id" @on-change="gradeChange">
                <Radio v-for="(item,index) in gradeList" :key="index" :label="item.id">{{ item.grade_name.zh? item.grade_name.zh: item.grade_name.mn }}</Radio>
            </RadioGroup>
        </FormItem>

        <FormItem label="班级">
            <RadioGroup v-if="classList.length != 0" v-model="form.class_id">
                <Radio v-for="(item,index) in classList" :key="index" :label="item.eclass_id">{{ item.eclass_name }}</Radio>
            </RadioGroup>
            <Radio v-if="classList.length == 0" disabled>暂无数据（请选择年级）</Radio>
        </FormItem>

        <FormItem label="自习时间">
            <RadioGroup v-model="form.types">
                <Radio v-for="(item,index) in ridioList" :key="index" :label="item.key">{{ item.value }}</Radio>
            </RadioGroup>
        </FormItem>

        <FormItem label="状态">
            <RadioGroup v-model="form.section">
                <Radio v-for="(item,index) in typeList" :key="index" :label="item.key">{{ item.value }}</Radio>
            </RadioGroup>
        </FormItem>

        <FormItem v-if="exportData" label="细则状态">
            <RadioGroup v-model="form.classification">
                <Radio v-for="(item,index) in classificationList" :key="index" :label="item.key">{{ item.value }}</Radio>
            </RadioGroup>
        </FormItem>

        <FormItem v-if="exportData && types == 0" label="值班时间">
            <RadioGroup v-model="form.watchlist_id">
                <Radio v-for="(item,index) in watchlistList" :key="index" :label="item.key">{{ item.value }}</Radio>
            </RadioGroup>
        </FormItem>
        
        <FormItem v-if="exportData" label="日期类型">
            <RadioGroup v-model="dates" @on-change="datesChanges">
                <Radio label="1">按时间段</Radio>
                <Radio label="2">按时日期</Radio>
            </RadioGroup>
        </FormItem>

        <FormItem v-if="exportData && dates == '1'" label="时间段">
            <DatePicker v-model="datetmes" @on-change="dateChange" type="daterange" placeholder="选择时间段" placement="top-start"></DatePicker>
        </FormItem>

        <FormItem v-if="exportData && dates == '2'" label="日期">
            <DatePicker v-model="form.updated_at" type="date" placeholder="选择日期" placement="top-start"></DatePicker>
        </FormItem>

        <FormItem v-if="!exportData" label="值班时间">
            <RadioGroup v-model="form.time">
                <Radio v-for="(item,index) in timeList" :key="index" :label="item.key">{{ item.value }}</Radio>
            </RadioGroup>
        </FormItem>

    </Form>
</template>
                
<script>
export default {
    props: {
        types: {
            type: Number,
            default: 0
        },
        exportData: {
            type: Boolean,
            default: false
        },
        modalStatus: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            dates: '1',
            dateState: false,
            datetmes: [],
            form: {
                schoolyear_id: null,
                semester_id: null,
                grade_id: null,
                class_id: null,
                types: null,
                section: null,
                classification: null,
                watchlist_id: null,
                time: 2,
                an_time: null,
                en_time: null,
                updated_at: null
            },

            ridioList1: [
                {key: null, value:'全部早自习'},
                {key: 1, value:'早自习'},
                {key: 5, value:'早读(上)'},
                {key: 7, value:'早读(下)'},
                {key: 6, value:'自愿值班'}
            ],
            ridioList2: [
                {key: null, value:'全部晚自习'},
                {key: 2, value:'第一晚自习'},
                {key: 3, value:'第二晚自习'},
                {key: 4, value:'第三晚自习'}
            ],
            ridioList3: [
                {key: null, value:'全部自习'},
                {key: 1, value:'早自习'},
                {key: 5, value:'早读(上)'},
                {key: 7, value:'早读(下)'},
                {key: 6, value:'自愿值班'},
                {key: 2, value:'第一晚自习'},
                {key: 3, value:'第二晚自习'},
                {key: 4, value:'第三晚自习'}
            ],
            typeList: [
                {key: null, value:'全部'},
                {key: 1, value:'未确认'},
                {key: 2, value:'已确认'}
            ],
            classificationList: [
                {key: null, value:'全部'},
                {key: 1, value:'加分'},
                {key: 2, value:'减分'}
            ],
            watchlistList: [
                {key: null, value:'全部'},
                {key: 11, value:'早自习'},
                {key: 12, value:'晚自习'}
            ],
            timeList: [
                {key: 2, value:'全部'},
                {key: 1, value:'当天'}
            ],

            gradeList: [],
            classList: [],
            gradeUrl: 'api/base/v1/get/grade/list',
            classUrl: 'api/eclass/v1/eclass/eclass_bes',
            
            yearList: [],
            semesterList: [],
            yearUrl: 'api/semester/v1/schoolyear/info',
            semesterUrl: 'api/semester/v1/semester/all_semester',
        }
    },
	computed: {
		ridioList () {
            let a = this.types
            if (a === 0) {
                return this.ridioList3
            } else if (a === 11) {
                return this.ridioList1
            } else if (a === 12) {
                return this.ridioList2
            } else {
                return [{key: null, value:'全部自习'}]
            }
		}
	},
    methods: {
        datesChanges () {
            this.form.updated_at = null
            this.datetmes = []
            this.form.an_time = null
            this.form.en_time = null
        },
        
        /************************************************************
         * 
         * 选择条件
         * 
         ************************************************************/
        searchCondition () {
            if (this.form.updated_at) {
                var d = new Date(this.form.updated_at);  
                this.form.updated_at = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`
            }
            let datas = JSON.parse(JSON.stringify(this.form))
            Object.entries(datas).forEach((el, i) => {
                if(!el[1]) delete datas[el[0]]
            })
            this.$emit('on-search', datas)
        },
        
        /************************************************************
         * 
         * 选择时间段
         * @param   {dates}            时间段
         * 
         ************************************************************/
        dateChange (dates) {
            this.form.an_time = dates[0]
            this.form.en_time = dates[1]
        },
        
        /************************************************************
         * 
         * 请求年级数据
         * 
         ************************************************************/
        gradeData () {
            this.$http.get(this.gradeUrl).then(val => {
                this.gradeList = val.data
            }).catch(err => {
                console.log(err)
            })
        },
        
        /************************************************************
         * 
         * 点击年级
         * 获取班级数据
         * @param   {index}            年级id
         * 
         ************************************************************/
        gradeChange (index) {
            this.classList = []
            this.form.class_id = null
            let params = {
                grade_id: index
            }
            this.$http.get(this.classUrl, { params }).then(val => {
                this.classList = val.data
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 请求学年数据
         * 
         ************************************************************/
        yearData () {
            this.$http.get(this.yearUrl).then(val=>{
                this.yearList = val.data
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 点击学年
         * 获取学期数据
         * @param   {index}            学年id
         * 
         ************************************************************/
        semesterData (index) {
            this.semesterList = []
            this.form.semester_id = null
            let params = {
                schoolyear_id: index
            }
            this.$http.get(this.semesterUrl, { params }).then(val=>{
                this.semesterList = val.data
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 选择条件
         * 
         ************************************************************/
        modalHandel (state) {
            let datas = JSON.parse(JSON.stringify(this.form))
            if (state) {
                Object.entries(this.form).forEach((el, i) => {
                    this.form[el[0]] = null
                })
                this.form.time = 2
                this.semesterList = []
                this.classList = []
                this.form.watchlist_id = this.types == 0?null:this.types == 11?11:this.types == 12?12:null
            }
        }
    },
    created () {
        this.gradeData ()
        this.yearData ()
    },
    watch:{
        modalStatus: {
            handler(){
                this.modalHandel (this.modalStatus)
            }
        },
        deep:true
    }
};
</script>
<style lang="less">
.duty-searchcriteria {
    max-height: 500px;
    overflow: auto;
}
</style>


